<template>
    <div class="attendance-management">
        <div class="header">
            <div class="header-left">
                <router-link to="/main/renshi/kaoqing" class="back-btn">
                    <i class="el-icon-arrow-left">返回</i>
                </router-link>
                <div class="save-info">
                    <el-button type="primary" icon="el-icon-check" @click="saveRecord">保存</el-button>
                    <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
                </div>
            </div>
            <h1 class="title">深圳市艾美思普科技有限公司<br>考勤管理流程</h1>
            <div class="meta">
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">文件编号：{{ meta.fileNumber }}</p>
                    <input v-else v-model="meta.fileNumber" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">文件版本：{{ meta.version }}</p>
                    <input v-else v-model="meta.version" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">编制部门：{{ meta.department }}</p>
                    <input v-else v-model="meta.department" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">生效日期：{{ meta.effectiveDate }}</p>
                    <input v-else v-model="meta.effectiveDate" style="width: 100px;" @blur="editMeta = false" />
                </div>
            </div>
            <div>
                <div style="display: flex;justify-content: space-around; margin-bottom: 20px;line-height: 30px;">
                    <div @dblclick="editApproval = true">
                        <label v-if="!editApproval"><span>批准：{{ approvalPerson }}</span>
                            <span>日期：{{ approvalDate.year }}年{{ approvalDate.month }}月{{ approvalDate.day
                            }}日</span></label>
                        <label v-else>
                            <span>批准：<input type="text" v-model="approvalPerson" style="width: 100px;"
                                    @blur="editApproval = false" /></span>
                            <span>日期：<input type="text" v-model="approvalDate.year" style="width: 40px;">年
                                <input type="text" v-model="approvalDate.month" style="width: 40px;">月
                                <input type="text" v-model="approvalDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                    <div @dblclick="editReview = true">
                        <label v-if="!editReview"><span>审核：{{ reviewer }}</span>
                            <span>日期：{{ reviewDate.year }}年{{ reviewDate.month }}月{{ reviewDate.day }}日</span></label>
                        <label v-else>
                            <span>审核：<input type="text" v-model="reviewer" style="width: 100px;"
                                    @blur="editReview = false" /></span>
                            <span>日期：<input type="text" v-model="reviewDate.year" style="width: 40px;">年
                                <input type="text" v-model="reviewDate.month" style="width: 40px;">月
                                <input type="text" v-model="reviewDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                    <div @dblclick="editCompilation = true">
                        <label v-if="!editCompilation"><span>编制：{{ compilationPerson }}</span>
                            <span>日期：{{ compilationDate.year }}年{{ compilationDate.month }}月{{ compilationDate.day
                            }}日</span></label>
                        <label v-else>
                            <span>编制：<input type="text" v-model="compilationPerson" style="width: 100px;"
                                    @blur="editCompilation = false" /></span>
                            <span>日期：<input type="text" v-model="compilationDate.year" style="width: 40px;">年
                                <input type="text" v-model="compilationDate.month" style="width: 40px;">月
                                <input type="text" v-model="compilationDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                </div>
                <!-- 分发部门编号部分 -->
                <div>
                    <label>分发部门编号</label><br>
                    <div v-for="(group, groupIndex) in distributionGroups" :key="groupIndex">
                        <div
                            style="display: grid;grid-template-columns: repeat(4,1fr); gap: 10px; text-align: left; align-items: center;width: 600px;margin: 10px auto;">
                            <div style="white-space: nowrap; display: flex;" v-for="(item, itemIndex) in group"
                                :key="itemIndex">
                                &emsp;<input type="checkbox" v-model="selectedDepartments[item.value]">
                                <span @dblclick="isEditingDepartment = true" v-if="!isEditingDepartment">{{ item.label
                                    }}</span>
                                <input v-else type="text" v-model="item.label" @blur="isEditingDepartment = false" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 修订记录部分 -->
            <button class="add-record-btn" @click="addRevisionRecord">新增修订记录</button>
            <table>
                <caption>修订记录</caption>
                <thead>
                    <tr>
                        <th>版本</th>
                        <th>生效日期</th>
                        <th>修订内容摘要</th>
                        <th>修订部门</th>
                        <th>修订人</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(record, index) in revisionRecords" :key="index">
                        <td><input type="text" v-model="record.version"></td>
                        <td>
                            <input type="text" v-model="record.effectiveDate.year" style="width: 40px;">年
                            <input type="text" v-model="record.effectiveDate.month" style="width: 40px;">月
                            <input type="text" v-model="record.effectiveDate.day" style="width: 40px;">日
                        </td>
                        <td><input type="text" v-model="record.summary"></td>
                        <td><input type="text" v-model="record.department"></td>
                        <td><input type="text" v-model="record.revisor"></td>
                    </tr>
                </tbody>
            </table>

            <!-- 使用提示 -->
            <p style="font-weight: bold;font-size: 1.4em;">使用前请确认是否为最新版本！</p>
            <!-- </div> -->
            <div class="section">
                <h2 class="section-title">1. 目的</h2>
                <p class="content">为加强系统考勤管理，规范考勤作业流程，考核系统运作的有效性。</p>
            </div>
            <div class="section">
                <h2 class="section-title">2. 范围</h2>
                <p class="content">适用于深圳市艾美思普科技有限公司所有人员。</p>
            </div>
            <div class="section">
                <h2 class="section-title">3. 职责</h2>
                <p class="content">3.1 企业管理部：负责编制、培训、解释、说明、监督实施与执行本管理流程的具体作业。</p>
                <p class="content">3.2 其他各部门：负责对本部门进行培训与监督与配合实施。</p>
            </div>
            <div class="section">
                <h2 class="section-title">4. 定义</h2>
                <p class="content">（无）</p>
            </div>
            <div class="section">
                <h2 class="section-title">5.内容：（管理流程）</h2>
                <div class="subsection">
                    <table class="custom-table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>流 程</th>
                                <th>职 责</th>
                                <th>工作要求</th>
                                <th>相关文件/记录</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in tableData" :key="index">
                                <td>{{ item.index + 1 }}</td>
                                <td style="width: 100px;" v-html="item.process"></td>
                                <td style="width: 100px;" v-html="item.responsibility"></td>
                                <td v-html="item.requirements" style="text-align: left;"></td>
                                <td style="width: 150px;" v-html="item.relatedFiles"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="section">
                <h2 class="section-title">6. 附件、相关文件及表单</h2>
                <div class="subsection">
                    <h3 class="subsection-title">6.1 相关文件</h3>
                    <p class="content">6.1.1 《招聘管理流程》</p>
                    <p class="content">6.1.2 《招聘管理办法》</p>
                    <p class="content">6.1.3 《考勤管理办法》</p>
                </div>
                <div class="subsection">
                    <h3 class="subsection-title">6.2 相关表单</h3>
                    <p class="content">6.2.1 《异常情况出勤签录申请单》</p>
                    <p class="content">6.2.2 《异常考勤确认表》</p>
                    <p class="content">6.2.3 《考勤汇总表》</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            meta: {
                fileNumber: 'AP-JY-06',
                version: 'C/0',
                department: '企业管理部',
                effectiveDate: '2015-01-01'
            },
            approvalPerson: '',//批准
            reviewer: '',//审核
            compilationPerson: '',//编制
            approvalDate: { year: '', month: '', day: '' },
            reviewDate: { year: '', month: '', day: '' },
            compilationDate: { year: '', month: '', day: '' },
            distributionGroups: [
                [
                    { value: '01', label: '01:总 经 理室' },
                    { value: '02', label: '02:管理者代表' },
                    { value: '03', label: '03:企业管理部' },
                    { value: '04', label: '04:财务管理部' }
                ],
                [
                    { value: '10', label: '10:手机厂务部' },
                    { value: '16', label: '16:总装生产部' },
                    { value: '25', label: '25:品质部' },
                    { value: '30', label: '30:光电厂务部' }
                ],
                [
                    { value: '11', label: '11:手机业务部' },
                    { value: '20', label: '20:厂务部' },
                    { value: '26', label: '26: S M T' },
                    { value: '31', label: '31:光电生产部' }
                ],
                [
                    { value: '12', label: '12:手机物控部' },
                    { value: '21', label: '21:业务部' },
                    { value: '27', label: '27:二车间' },
                    { value: '32', label: '32:光电品质部' }
                ],
                [
                    { value: '13', label: '13:板卡生产部' },
                    { value: '22', label: '22:研发部' },
                    { value: '28', label: '28:三车间' },
                    { value: '33', label: '33:光电业务部' }
                ],
                [
                    { value: '14', label: '14:手机品质部' },
                    { value: '23', label: '23:物控部' },
                    { value: '29', label: '29:采购部' },
                    { value: '34', label: '34:光电物控部' }
                ],
                [
                    { value: '15', label: '15:手机工程部' },
                    { value: '24', label: '24:工程部' }
                ]
            ],
            tableData: [
                {
                    index: 0,
                    process: '开始',
                    responsibility: '',
                    requirements: '',
                    relatedFiles: ''
                }, {
                    index: 1,
                    process: '报到入职',
                    responsibility: '培训专员<br>人事文员<br>招聘专员',
                    requirements: '1. 培训专员/人事文员/招聘专员负责新人报到资料的齐全与真实确认；2. 培训专员/人事文员/招聘专员负责新人的报到引导及事业部介绍等相关指引。',
                    relatedFiles: '《招聘管理流程》<br>《招聘管理办法》'
                },
                {
                    index: 2,
                    process: '复核资料',
                    responsibility: '人资主管<br>车间负责人<br>企管部长<br>总经理',
                    requirements: '1. 人资主管负责或安排他人负责新入人员资料的复核审查，并确保资料的真实有效性；<br> 2. 凡公司职员层含以上职位的资料均需由企管部长、总经理进行核准与批准；<br>3. 凡新入职者，其个人入职资料均需经过部门层层签核确认，人资最终把关审查其资料的全面性。',
                    relatedFiles: '(个人资料档案)'
                },
                {
                    index: 3,
                    process: '制作厂牌',
                    responsibility: '人事文员',
                    requirements: '1. 制作厂牌（包括考勤IC卡、厂牌卡）；<br>2. 制工号，将厂牌工号及相关内容录入公司统一运作同鑫人力资源系统；<br>3. 过程制作，系统归档；',
                    relatedFiles: '纸卡、厂牌套、IC卡、挂绳、同鑫人力资源系统'
                },
                {
                    index: 4,
                    process: '刷卡',
                    responsibility: '在职人员',
                    requirements: '1. 按《考勤管理办法》实施考勤刷卡；<br>2. 总经理可免刷卡，特殊情况经总经理批准后免刷卡外，其他人员一律刷卡。',
                    relatedFiles: '《考勤管理办法》<br>同鑫人力资源系统'
                }, {
                    index: 5,
                    process: '采集考勤数据',
                    responsibility: 'IT<br>人事文员',
                    requirements: '定期进行考勤数据采集，并读取考勤数据；',
                    relatedFiles: '同鑫人力资源系统'
                },
                {
                    index: 6,
                    process: '反馈异常',
                    responsibility: '考勤专员<br>人资主管',
                    requirements: '1. 各事业部需在次日九点前将当天异常情况签卡记录递交上级签核并反馈到考勤专员处修正考勤；<br>2. 考勤专员根据所采集的数据，每天进行一次考勤处理，并将异常情况及时反馈各事业部门；<br>3. 各事业部在收到考勤异常确认表后，经员工本人、上级签核，并在一个工作日内反馈到考勤专员处修正考勤；',
                    relatedFiles: '同鑫人力资源系统<br>《考勤管理办法》<br>《异常情况出勤签录申请单》'
                },
                {
                    index: 7,
                    process: '审核',
                    responsibility: '考勤专员<br>事业部<br>人资主管',
                    requirements: '1. 考勤专员需将各事业部返回的异常考勤确认表进行确认并修正更新；<br>2. 事业部需参与每月本部门内部的考勤进行确认与审核；<br>3. 人资主管进行异常考勤的审核；',
                    relatedFiles: ''
                },
                {
                    index: 8,
                    process: '制作考勤报表',
                    responsibility: '考勤专员',
                    requirements: '考勤专员根据日常出勤实际状况处理考勤异常数据，生成报表，制作月考勤汇总表；',
                    relatedFiles: '《考勤汇总表》<br>同鑫人力资源系统'
                },
                {
                    index: 9,
                    process: '转入薪资核算',
                    responsibility: '薪酬专员<br>系统运营主管',
                    requirements: '1. 薪酬专员根据审核好的考勤报表之相应资料纳入到薪资核算范围；<br>2. 系统运营主管进行过程指引与跟进检视；',
                    relatedFiles: '《考勤汇总表》'
                },
                {
                    index: 10,
                    process: '结束',
                    responsibility: '',
                    requirements: '',
                    relatedFiles: ''
                }
            ],
            selectedDepartments: {},
            revisionRecords: [
                {
                    version: '',
                    effectiveDate: { year: '', month: '', day: '' },
                    summary: '',
                    department: '',
                    revisor: ''
                }
            ],
            editMeta: false,
            editApproval: false,
            editReview: false,
            editCompilation: false,
            isEditingDepartment: false,
        };
    },
    methods: {
        addRevisionRecord() {
            this.revisionRecords.push({
                version: '',
                effectiveDate: { year: '', month: '', day: '' },
                summary: '',
                department: '',
                revisor: ''
            });
        },
        saveRecord() {
            console.log(this.meta);
        },
        printForm() {
            window.print()
        },
    }
};
</script>
<style lang="scss" scoped>
.attendance-management {
    line-height: 1.5;
    font-family: '宋体', sans-serif;
    /* 设置字体 */
    padding: 20px;
    /* 页面内边距 */
}

.header {
    width: 1200px;
    margin: 0 auto;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #409EFF;

    i {
        // font-size: 20px;
        color: #409EFF;
    }

    a.back-btn.router-link-active {
        color: #409EFF;
    }
}

.title {
    text-align: center;
    /* 标题居中 */
    // font-size: 24px;
    /* 标题字体大小 */
}

.meta {
    margin: 0 auto;
    width: 170px;
    text-align: left;
    /* 元信息居中 */
    margin-bottom: 5px;
    /* 元信息下方边距 */
    color: #000;
    /* 元信息字体颜色 */
}

.meta p {
    margin: 5px 0;
    /* 元信息段落内边距 */
}

/* 批准、审核、编制部分样式 */
.attendance-management div div {
    /* display: flex; */
    /* flex-direction: column; */
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
}

.attendance-management div div label {
    margin-bottom: 5px;
    /* 标签下方边距 */
}

.attendance-management div div span {
    display: flex;
    /* 水平排列输入框 */
}

.attendance-management div div span input {
    margin-right: 5px;
    /* 输入框之间的间距 */
}

input {
    border: none;
    /* 去掉输入框边框 */
    background-color: transparent;
    /* 去掉输入框背景色 */
}

/* 分发部门编号部分样式 */
.distribution-groups {
    margin-bottom: 20px;
    /* 下方边距 */
}

.distribution-groups label {
    margin-bottom: 5px;
    /* 标签下方边距 */
    display: block;
    /* 单独占一行 */
}

.distribution-groups div {
    margin-bottom: 10px;
    /* 每个分组下方边距 */
}

/* 修订记录表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    /* 表格下方边距 */
}

table th,
table td {
    border: 1px solid #ccc;
    /* 边框颜色和样式 */
    padding: 8px;
    /* 内边距 */
    text-align: center;
    /* 文本左对齐 */
}

table caption {
    margin-bottom: 10px;
    /* 标题下方边距 */
    font-size: 18px;
    /* 标题字体大小 */
    font-weight: bold;
    /* 标题加粗 */
}

/* 章节样式 */
.section {
    /* margin-bottom: 10px; */
    /* 章节下方边距 */
}

.section-title {
    text-align: left;
    /* font-size: 20px; */
    /* 章节标题字体大小 */
    color: #007bff;
    /* 章节标题字体颜色 */
    /* margin-bottom: 10px; */
    /* 章节标题下方边距 */
}

.content {
    margin-bottom: 10px;
    /* 内容段落下方边距 */
    text-align: left;
    text-indent: 2em;
}

/* 子章节样式 */
.subsection {
    text-indent: 2.2em;
    /* 子章节左缩进 */
}

.subsection-title {
    text-indent: 1em;
    /* font-size: 18px; */
    /* 子章节标题字体大小 */
    color: #333;
    /* 子章节标题字体颜色 */
    /* margin-bottom: 10px; */
    /* 子章节标题下方边距 */
    text-align: left;
}

ol li {
    list-style: none;
}

/* 列表样式 */
.content-list {
    padding-left: 20px;
    /* 列表左缩进 */
    text-align: left;

    li {
        // 取消列表符号
        list-style: none;
    }
}

/* 附件表格样式 */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
    /* 文本居中 */
}

@media print {
    .header {
        width: 1000px;
        margin: 0px;
    }

    .header-left {
        display: none;
    }

    .add-department {
        display: none;
    }

    .add-record-btn {
        display: none;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
        // white-space: nowrap;
    }
}
</style>